<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://libs.baidu.com/jquery/1.3.1/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/logo.ico"/>
    <link rel="bookmark" href="img/logo.ico" type="image/x-icon"/>
    <script src="js/cacheUtil.js"></script>
    <script src="js/httpUtil.js"></script>
    <script src="js/getUrl.js"></script>
    <script src="js/userDetails.js"></script>
    <title>个人中心</title>
    <!--<link rel="stylesheet" href="css/userDetails.css">-->
</head>
<body>
<div class="container">
    <iframe src="head.html" frameborder="0" width="100%" height="90px" scrolling="No" align="center"></iframe>
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="img/userHead.png" alt="" id="u_img" height="280px" width="280px">
            <div class="caption">
                <div id="userInfo" style="margin-left: 40px">
                </div>
                <p align="center" id="changeInfo">
                    <a href="myCourses.html" class="btn btn-primary" role="button" style="width: 95%">我的学习</a>
                </p>
                <p align="center" id="address">
                    <a href="javascript:loadOrder()" class="btn btn-primary" role="button" style="width: 95%">我的订单</a>
                </p>
                <p align="center" id="comments">
                    <a href="javascript:loadUser()" class="btn btn-primary" role="button" style="width: 95%">修改个人信息</a>
                </p>
                <!--<p align="center" id="loginOut">
                    <a href="javascript:;" class="btn btn-primary" role="button" style="width: 95%">登出</a>
                </p>-->
            </div>
        </div>
    </div>
    <!--  加载页面显示的内容-->
    <span class="col-md-9" id="showPage">

     </span>

    <iframe src="bottom.html" frameborder="0" width="100%" height="200" scrolling="No"></iframe>

</div>
<!--课程渲染模板-->
<template id="template_course">
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="{img}" alt="...">
                <div class="caption">
                    <h3>{name}</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button" onclick="">去学习</a> <a href="#"
                                                                                               class="btn btn-default"
                                                                                               role="button">删除</a></p>
                </div>
            </div>
        </div>
    </div>
</template>

<!--订单渲染模板-->
<template id="template_order">
    <div class="container">
        <div>
            <button class="btn btn-default" type="submit" style="width: 155px;border: black solid 1px">订单编号</button>
            <button class="btn btn-default" type="submit" style="border: black solid 1px;width: 110px;">课程id</button>
            <button class="btn btn-default" type="submit" style="border: black solid 1px;width: 110px">交易金额</button>
            <button class="btn btn-default" type="submit" style="width: 205px;border: black solid 1px">订单状态</button>
        </div>
    </div>
</template>

<!--个人信息模板-->
<template id="template_userInfo">
    <div class="container" style="margin-top: 120px;margin-left: 120px">
        <a class="btn btn-primary" href="#" role="button">用户</a>
        <input id="user_name" type="text" style="height: 33px" value="">
        <button type="button" class="btn btn-info" onclick="changeUsername()">修改</button>
        <p></p>
        <a class="btn btn-primary" href="#" role="button">密码</a>
        <input id="user_password" type="text" style="height: 33px" value="">
        <button type="button" class="btn btn-info" onclick="changePassword()">修改</button>
        <p></p>
        <a class="btn btn-primary" href="#" role="button">手机</a>
        <input id="user_phone" type="text" style="height: 33px" value="">
        <button type="button" class="btn btn-info" onclick="changePhone()">修改</button>
        <p></p>
        <a class="btn btn-primary" href="#" role="button">邮箱</a>
        <input id="user_email" type="text" style="height: 33px" value="">
        <button type="button" class="btn btn-info" onclick="changeEmail()">修改</button>
        <p></p>
        <a class="btn btn-primary" href="#" role="button">性别</a>
        <input id="user_sex" type="text" style="height: 33px" value="">
        <button type="button" class="btn btn-info" onclick="changeSex()">修改</button>
        <p></p>
        <a class="btn btn-primary" href="#" role="button">生日</a>
        <input id="user_birth" type="text" style="height: 33px" value="">
        <button type="button" class="btn btn-info" onclick="changeBirth()">修改</button>
    </div>
</template>
<script>
    //加载用户信息
    $(function () {
        let url = "/user/info";
        let user = getLoginUser();
        let param = user.id;
        console.log(user);
        /*httpGet(url, param, function (data) {
            let userId = data.id;
            let userName = data.name;
            $("#userInfo").html(
                '<h4 id="username"></h4>' +
                '<h4 id="userid"></h4>'
            )
            $("#username").html("你好：" + userName);
            $("#userid").html("ID：" + userId);
        })*/
        $("#userInfo").html(
            '<h4 id="username"></h4>' +
            '<h4 id="userid"></h4>'
        );
        $("#username").html("你好：" + user.name);
        $("#userid").html("ID：" + user.id);
    });

    function startOrder() {
        /*1.获取[1.price 2.订单号 3.订单名称]
        * 2.发送请求  */
        /*1.获取所有购物车的物品*/
        /*
        * from : shopping.html
        * param : userId
        * to : /cart/showAll
        * param : totalPrice
        *
        * */
        let course = JSON.parse(sessionStorage.getItem("course"));
        let order_price = "10088";
        let order_Name = "empty shopping html";
        let order_ID = getOrderId();
        let url = "/order/start";
        let params = {
            WIDout_trade_no: order_ID,
            WIDtotal_amount: order_price,
            WIDsubject: order_Name,
            WIDbody: "kevin pay demo",
            passback_params: course.id
        };
        console.log("params is : " + params.valueOf());
        console.log("param.json is : " + JSON.stringify(params));
        httpGetHtml(url, params, function (resp) {
            console.log("alipay resp is : " + resp);
            $('body').append(resp);
            $("form").attr("target", "_blank");
        })
    }

    function getOrderId() {
        let vNow = new Date();
        let sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        return sNow;
    }
</script>
</body>
</html>